<template>
    <view class="after-sale-container">
        <view class="log-item" v-for="(log, index) in logList" :key="index">
            <view class="item-line" v-if="index === 0">
                <view class="line-top"></view>
                <view class="mark"></view>
                <view class="line-down"></view>
            </view>
            <view class="item-line" v-else>
                <view class="line-top-more"></view>
                <view class="mark-more"></view>
                <view class="line-down"></view>
            </view>
            <view class="log-detail">
                <view style="height: 16px;"></view>
                <view class="detail-box">
                    <span class="box-title">处理信息</span>
                    <span class="box-content">{{ log.log_detail }}</span>
                    <span class="box-time">{{ log.operator }}（{{ log.log_time | unixToDate }}）</span>
                    <view style="height: 16px;"></view>
                    <view class="bottom-line"></view>
                </view>
            </view>
        </view>
  </view>
</template>
<script>
  import * as API_AfterSale from '@/api/after-sale.js'
  export default {
    data() {
      return {
        /** 申请售后商品信息集合 */
        logList: []
      }
    },
    onLoad(options) {
        API_AfterSale.getServiceLogs(options.service_sn).then(response => {
          this.logList = response
        })
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
    view {
        position: relative;
        box-sizing: border-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        flex-shrink: 0;
        background-color: #FFFFFF;
    }
    .log-item {
        flex-direction: row;
        justify-content: flex-start;
        .item-line {
            flex-direction: column;
            width: 110rpx;
            align-items: center;
            .line-top {
                height: 32rpx;
                width: 2rpx;
                background-color: rgb(255, 255, 255);
            }
            .mark {
                width: 24rpx;
                height: 24rpx;
                border-radius: 12rpx;
                background-color: rgb(240, 37, 15);
                border-style: solid;
                border-width: 4rpx;
                border-color: rgba(240, 37, 15, 0.2);
            }
            .line-down {
                flex: 1 1 0%;
                width: 2rpx;
                background-color: rgb(227, 229, 233);
            }
            .line-top-more {
                height: 32rpx;
                width: 2rpx;
                background-color: rgb(227, 229, 233);
            }
            .mark-more {
                width: 16rpx;
                height: 16rpx;
                border-radius: 10rpx;
                background-color: rgb(191, 191, 191);
            }
        }
        .log-detail {
            flex-direction: column;
            flex: 1 1 0%;
            .detail-box {
                flex-direction: column;
                .box-title {
                    margin: 0 0 26rpx;
                    font-size: 30rpx;
                    color: rgb(46, 45, 45);
                    font-weight: bold;
                    line-height: 36rpx;
                }
                .box-content {
                    margin: 0 0 18rpx;
                    font-size: 26rpx;
                    color: rgb(46, 45, 45);
                    line-height: 32rpx;
                }
                .box-time {
                    margin: 0px;
                    font-size: 11px;
                    color: rgb(132, 132, 132);
                    line-height: 15px;
                }
                .bottom-line {
                    height: 1px;
                    background-color: rgb(238, 238, 238);
                    position: absolute;
                    bottom: 0px;
                    left: 0px;
                    right: 0px;
                    width: 90%;
                }
            }
        }
    }
</style>
